<template>
  <div class="page">
    <van-field v-model="user.childName" required clearable label="姓名" placeholder="输入报名孩子的姓名"/>
    <van-cell title="性别" required is-link :value="gender?gender:'选择性别'" @click="sex = true"/>
    <van-cell
      title="生日"
      required
      is-link
      :value="user.birthday?user.birthday:'选择生日'"
      @click="date = true"
    />
    <van-field
      v-model="user.mobile"
      type="number"
      required
      clearable
      label="电话"
      placeholder="输入联系电话"
    />
    <van-field v-model="user.belongTo" clearable label="公司名称" placeholder="输入公司名称"/>
    <van-cell
      title="地址"
      required
      is-link
      :value="user.city?user.city:'选择省市'"
      @click="address = true"
    />
    <van-field v-model="user.address" clearable label="详细地址" placeholder="输入详细地址"/>
    <van-field v-model="user.comments" type="textarea" clearable label="备注" placeholder="输入备注"/>
    <div class="btn">
      <van-button type="primary" size="large" @click="submit">提交</van-button>
    </div>
    <van-actionsheet
      v-model="sex"
      :actions="[
        {
          name: '男',
          value: 0
        },
        {
          name: '女',
          value: 1
        }
      ]"
      cancel-text="取消"
      @select="onSelectSex"
      @cancel="sex=false"
    />
    <van-actionsheet v-model="date">
      <van-datetime-picker v-model="birthday" @confirm="chooseDate" type="date"/>
    </van-actionsheet>
    <van-actionsheet v-model="address">
      <van-area :area-list="areaList" :columns-num="2" title="标题" @confirm="chooseAddress"/>
    </van-actionsheet>
  </div>
</template>

<script>
import areaList from '@/api/areaList'
import { applyDistributor } from '@/api'
import mixin from '@/mixin'

export default {
  name: 'contrive',
  mixins: [mixin],
  components: {
  },
  data() {
    return {
      buy: false,
      sex: false,
      gender: null,
      date: false,
      address: false,
      birthday: '',
      user: {
        childName: '张三',
        belongTo: '张三',
        province: '',
        city: '',
        address: '沈阳市铁西区',
        mobile: '13344445555',
        birthday: '',
        comments: '',
        gender: 0
      },
      areaList: areaList
    }
  },
  methods: {
    onSelectSex(e) {
      this.user.gender = e.value
      this.gender = e.name
      this.sex = false
    },
    chooseDate(e) {
      this.birthday = e
      this.user.birthday = e.toLocaleDateString()
      this.date = false
    },
    submit() {
      if (!this.user.childName) {
        this.$toast('请输入姓名')
        return false
      }
      if (!this.user.mobile) {
        this.$toast('请输入电话号')
        return false
      }
      if (!this.user.city) {
        this.$toast('请填写省市')
        return false
      }
      if (!this.user.address) {
        this.$toast('请填写地址')
        return false
      }
      if (!this.user.birthday) {
        this.$toast('请选择生日')
        return false
      }
      if (!this.user.belongTo) {
        this.$toast('请填写组织')
        return false
      }
      console.log({ ...this.user })
      applyDistributor(this.user).then(res => {
        console.log(res)
      }).catch(err => {
        this.$dialog.alert({
          title: '提示',
          message: err.message
        })
      })
    },
    chooseAddress(arr) {
      this.user.city = arr[0].name
      this.user.province = arr[1].name
      this.address = false
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'
.btn
  padding 30px 15px 0
</style>
